const CracoLessPlugin = require('craco-less');
// const pxToViewport = require('postcss-px-to-viewport')
const path = require('path')
// const vw = pxToViewport({
//     // 视口宽度，一般就是 375（ 设计稿一般采用二倍稿，宽度为 375 ）
//     viewportWidth: 1920,
// })
module.exports = {
    // webpack 配置
    webpack: {
        // 配置别名
        alias: {
            // 约定：使用 @ 表示 src 文件所在路径
            '@': path.resolve(__dirname, 'src'),
            '@scss': path.resolve(__dirname, 'src', 'assets', 'styles')
        },
    },

    // style: {
    //     postcss: {
    //         mode: 'extends',
    //         loaderOptions: {
    //             postcssOptions: {
    //                 ident: 'postcss',
    //                 plugins: [vw]
    //             }
    //         }
    //     }
    // },
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: {
                            '@primary-color': '#7546c9',// 全局主色
                            '@link-color': '#1890ff', // 链接色
                            '@success-color': '#52c41a',// 成功色
                            '@warning-color': '#faad14',// 警告色
                            '@error-color': ' #f5222d',// 错误色
                            '@font-size-base': '14px', // 主字号
                            '@heading-color': 'rgba(0, 0, 0, 0.85)',// 标题色
                            '@text-color': 'rgba(0, 0, 0, 0.65)', // 主文本色
                            '@text-color-secondary': 'rgba(0, 0, 0, 0.45)', // 次文本色
                            '@disabled-color': 'rgba(0, 0, 0, 0.25)', // 失效色
                            '@border-radius-base': '8px', // 组件/浮层圆角
                            '@border-color-base': '#d9d9d9', // 边框色
                        },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
};